<script>
    import { ref, reactive } from 'vue'; //导入，特别注意，Vue3中是想用什么，得自己导入

    export default {
        //vue2
        // C: Vue3 支持Vue2 选项式 API的写法，推荐用组合式API.
        data() {
            return {
                is_show: true
            }
        },
        // function:data(){
        //   return {
        //     is_show:true
        //   }
        // },
        methods: {
            closeLogo() {
                this.is_show = !this.is_show;
            }
        },
        setup(props, context) {
            // A vue3 组合式API入口 ，用 ref定义 响应式数据
            const is_show2 = ref(true) //用响应式的函数来定义  响应式数据
            // ref 定义任意类型的响应式数据，哪果是对象类型(如数组，它会自动转为reactive)
            // ref 定义的数据，在模板中直接用：{{is_show2}}、在js中，通过.value取，如：is_show2.value

            // B 定义函数
            const closeLogo2 = () => {
                console.log(is_show2, is_show2.value)
                is_show2.value = !is_show2.value;
            }

            // D:reactive 定义 对象类型的 响应式数据
            const arr = reactive([
                '苹果', '西瓜', '火龙果'
            ])

            // 定义响应式数据，推荐用 ref.

            // E:Vue3 中的模板语法、指令、事件 都是同Vue2,要学习的是Vue3 不同的地方，参考Vue3文档
            // 过一遍就可以了。

            // 需要用的时候，得返回（变量 或函数）
            return {
                // is_show2:is_show2
                is_show2,
                closeLogo2,
                arr
            }

        }

    }
</script>
<template>
    <img src="/vite.svg" class="logo" alt="Vite logo" v-show="is_show" />
    <button @click="closeLogo">关闭</button>{{is_show}}

    <hr>
    <img src="/vite.svg" class="logo" alt="Vite logo" v-show="is_show2" />
    <button @click="closeLogo2">关闭</button>{{is_show2}}

    <hr>
    <ul>
        <li v-for="(v,k) in arr" :key="'a_'+k">{{v}}</li>
    </ul>
</template>